import React from 'react';
import { Button, Row, Col, Tooltip } from 'antd';
import CustomParamsList from './list';
import CommonListsIndex from '../../../../components/CommonLists/index';
import FilterTool from '../../../../components/FilterTool';
import Modal from '../../../../components/Modal';
import services from '../../../../services/api';
import CustomParamAdd from './add';
import RelationStrategy from '../../../Strategy/Strategy/relation';
import AuditStatus from '../../../../components/AuditStatus';
import RelationComponent from '../../../Strategy/Strategy/Component/relation';

class CustomParams extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'customParams';
    this.listsComponent = CustomParamsList;
    this.addComponent = CustomParamAdd;
    this.editComponent = CustomParamAdd;
    this.model_width = '1200px';
    this.prevQueryTableParams = { group_id: 0 };
    this.state = {
      list: [],
      totalCount: 0,
      interfaceGroupOptions: [],
      interfaceOptions: [],
    };
  }

  componentDidMount() {
    this.getInterfaceGroup();
  }

  // group_id变化 则获取接口
  componentDidUpdate() {
    if (this.prevQueryTableParams.group_id !== this.queryTableParams.group_id) {
      this.getInterfaceByGroup(this.queryTableParams.group_id);
      this.prevQueryTableParams = this.queryTableParams;
    }
  }

  // 获取接口分组
  getInterfaceGroup = async () => {
    const { data, code } = await services.customParams.interfaceGroupList();
    if (!code) {
      this.setState({
        interfaceGroupOptions: data,
      });
    }
  };

  // 根据接口分组获取接口
  getInterfaceByGroup = async (group_id) => {
    if (!group_id) return this.setState({ interfaceOptions: [] });
    const { data, code } = await services.customParams.getInterfaceByGroup({ group_id });
    if (!code)
      this.setState({
        interfaceOptions: data,
      });
  };

  // 查看详情
  handleDetail = (record) => {
    const EditComponent = this.editComponent;
    Modal.open({
      title: '详情',
      width: '1000px',
      content: <EditComponent record={record} closeModal={this.closeModal} actionType='detail' />,
      isOkBtn: false,
      isCancelBtn: false,
    });
  };

  // 关联策略
  showRelationStrategy = (record) => {
    Modal.open({
      title: (
        <>
          关联策略<span style={{ fontSize: 10, color: 'grey', marginLeft: 4 }}>仅展示当前部门拥有权限数据</span>
        </>
      ),
      width: '1000px',
      content: (
        <RelationStrategy
          record={record}
          param={{
            type: 'ref_list',
            strategy_type: 2,
            custom_field_id: record.third_list_param_id,
          }}
        />
      ),
      isOkBtn: true,
      maskClosable: false,
      isCancelBtn: true,
      ok: () => Modal.close(),
    });
  };

  // 关联组件
  showRelationComponent = (record) => {
    Modal.open({
      title: (
        <>
          关联组件<span style={{ fontSize: 10, color: 'grey', marginLeft: 4 }}>仅展示当前部门拥有权限数据</span>
        </>
      ),
      width: '1000px',
      content: (
        <RelationComponent
          record={record}
          param={{
            type: 'ref_list',
            strategy_type: 1,
            custom_field_id: record.third_list_param_id,
          }}
        />
      ),
      isOkBtn: true,
      maskClosable: false,
      isCancelBtn: true,
      ok: () => Modal.close(),
    });
  };

  getColumns = () => {
    return [
      {
        title: '字段名',
        key: 'name',
        ellipsis: true,
        dataIndex: 'name',
        render: (text, record) => (
          <Tooltip title={text} placement='topLeft'>
            <div className="overflowtext">
              <Button type='link' onClick={() => this.handleDetail(record)}>
                {record.name}
              </Button>
            </div>
          </Tooltip>
        ),
      },
      {
        title: (
          <>
            {this.getFilterTitle('接口分组', this.state.interfaceGroupOptions, 'group_id', this.refreshTableFilter, [
              'id',
              'name',
            ])}
          </>
        ),
        dataIndex: 'group_name',
        ellipsis: true,
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '所属数据接口',
              this.state.interfaceOptions,
              'third_list_config_id',
              this.refreshTableFilter,
              ['third_list_config_id', 'name']
            )}
          </>
        ),
        dataIndex: 'config_name',
        ellipsis: true,
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        ),
      },
      {
        title: '字段CODE',
        dataIndex: 'code',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '数据类型',
        dataIndex: 'data_type',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '关联组件',
        dataIndex: 'assemblySum',
        render: (text, record) => {
          return (
            <Button type='link' onClick={this.showRelationComponent.bind(this, record)}>
              {text}
            </Button>
          );
        },
      },
      {
        title: '关联策略',
        dataIndex: 'strategySum',
        render: (text, record) => {
          return (
            <Button type='link' onClick={this.showRelationStrategy.bind(this, record)}>
              {text}
            </Button>
          );
        },
      },
      {
        title: '所属机构',
        dataIndex: 'dept_name',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '可见部门',
        dataIndex: 'deptAccess',
        render: (text) => {
          const tempText = text.join(',');
          return (
            <Tooltip title={tempText} placement='topLeft'>
              {tempText}
            </Tooltip>
          );
        },
      },
      {
        title: '创建/修改人',
        dataIndex: 'create_user_name',
        render: (_, record) => (
          <Tooltip title={`${record.create_user_name}/${record.update_user_name}`} placement='topLeft'>{`${
            record.create_user_name
          }/${record.update_user_name}`}</Tooltip>
        ),
      },
      {
        title: '修改时间',
        dataIndex: 'update_time',
        width: 150,
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '审核情况',
        key: 'audit_label',
        dataIndex: 'audit_label',
        render: (text, record) => <AuditStatus text={text} record={record} />,
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '字段名｜字段code｜创建人｜修改人',
      },
    ];
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={6}>
            <Button type='primary' onClick={this.add}>
              添加自定义参数
            </Button>
          </Col>
          <Col span={18}>
            <FilterTool
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
              justify='end'
              refresh={this.resetList}
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            {...this.props}
            edit={this.edit}
            onChangePagination={this.onChangePagination}
            queryList={this.freshQueryList}
            columns={this.getColumns()}
            rowKey='third_list_param_id'
          />
        </div>
      </div>
    );
  }
}

export default CustomParams;
